<template>
  <div id="chart" style="width: 100%; height: 80%"></div>
</template>

<script lang="ts">
import { defineComponent, onMounted } from 'vue'
import * as echarts from 'echarts'
export default defineComponent({
  setup() {
    onMounted(() => {
      var myChart = echarts.init(
        document.getElementById('chart') as HTMLElement
      )
      // 绘制图表
      myChart.setOption({
        title: {
          text: '每周用户访问指标'
        },
        legend: {
          data: ['评论数', '访问量']
        },
        xAxis: {
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          axisLine: {
            show: true
          }
        },
        series: [
          {
            name: '评论数',
            type: 'bar',
            data: [5, 15, 25, 5, 5, 15, 10],
            itemStyle: {
              color: '#a90000'
            }
          },
          {
            name: '访问量',
            type: 'line',
            data: [10, 22, 38, 20, 20, 33, 20],
            itemStyle: {
              color: '#000'
            }
          }
        ]
      })
    })

    return {}
  }
})
</script>

<style scoped></style>
